import React, { Component } from 'react';
import { connect } from 'react-redux';
import AdvancedQuery from '../AdvancedQuery';
import AdvancedRelationQuery from '../AdvancedRelationQuery';
import dataCenter from '../../dataCenter';
import NodeSearch from './NodeSearch';
import RelationSearch from './RelationSearch';
import {
	Input,
	Collapse,
	Button,
	Row,
	Col,
	Icon,
	Form,
	Select,
	InputNumber,
	Card
} from 'antd';

import * as d3 from 'd3';

const FormItem = Form.Item;
const Option = Select.Option;
const OptGroup = Select.OptGroup;

import {
	getAllNodesCount,
	getAllRelationshipsCount,
	advancedQueryNodes,
	getPaths,
	advancedQueryPath,
	getAllRelationTypes
} from '../../action';


const Panel = Collapse.Panel;

class TopologySearch extends Component {
	componentDidMount() {
		this.props.dispatch(getAllNodesCount());
		this.props.dispatch(getAllRelationshipsCount());
		dataCenter.getLabels().then(labels => {
			this.setState({
				labels
			})
		});
		dataCenter.getPropertyKeys().then(propertyKeys => {
			this.setState({
				propertyKeys
			})
		})
		dataCenter.getAllRelationTypes().then(relationTypes => {
			this.setState({
				relationTypes
			})
		})
	}
	state = {
		directionComType: 'out',
		labels: [],
		propertyKeys: [],
		relationTypes: [],
		minLength: null,
		maxLength: null
	}
	handleChange = (type, value) => {
		this.setState({
			[type]: value
		})
	}

	getAllNodesCount = () => {
		this.props.setSearchType('');
		this.props.dispatch(getAllNodesCount());
	}

	getPaths = () => {
		const { directionComType } = this.state;
		let direction;
		if (directionComType === 'out') {
			direction = 0;
		} else if (directionComType === 'in') {
			direction = 1;
		} else {
			direction = 2;
		}
		const start = this.refs.start.refs.input.value;
		const destination = this.refs.destination.refs.input.value;
		const minLength = this.state.minLength;
		const maxLength = this.state.maxLength;
		const params = {start, destination, minLength, maxLength};
		const finalParams = Object.keys(params).reduce((pre, item) => {
			if (params[item]) {
				return Object.assign(pre, {[item]: params[item]})
			} else {
				return pre;
			}
		}, {direction})
		if (finalParams.start)
		this.props.dispatch(getPaths(finalParams));
	}

	advancedQueryPath = () => {
		const { directionComType } = this.state;
		let direction;
		if (directionComType === 'out') {
			direction = 0;
		} else if (directionComType === 'in') {
			direction = 1;
		} else {
			direction = 2;
		}
		const start = this.refs.start.refs.input.value;
		const destination = this.refs.destination.refs.input.value;
		const minLength = this.state.minLength;
		const maxLength = this.state.maxLength;
		const params = {start, destination, minLength, maxLength};
		const finalParams = Object.keys(params).reduce((pre, item) => {
			if (params[item]) {
				return Object.assign(pre, {[item]: params[item]})
			} else {
				return pre;
			}
		}, {direction})
		if (finalParams.start)
		this.props.dispatch(advancedQueryPath(finalParams));
	}

	changeDirection = () => {
		const { directionComType } = this.state;
		if (directionComType === 'all') {
			this.setState({directionComType: 'in'})
		} else if (directionComType === 'in') {
			this.setState({directionComType: 'out'})
		} else if (directionComType === 'out') {
			this.setState({directionComType: 'all'})
		}
	}
	render() {
		const { directionComType } = this.state;
		const { selectedSecondKey } = this.props;
		let directionCom;
		if (directionComType === 'all') {
			directionCom = <i style={{color: 'red', fontSize: 20, fontWeight: 'bold'}} className="icon iconfont icon-Thesorting"></i>
		} else if (directionComType === 'in') {
			directionCom = <Icon style={{color: 'red', fontSize: 20, fontWeight: 'bold', position: 'relative',top: 7}} type="arrow-up" />
		} else if (directionComType === 'out') {
			directionCom = <Icon style={{color: 'red', fontSize: 20, fontWeight: 'bold', position: 'relative',top: 7}} type="arrow-down" />
		}
		return (
			<Collapse accordion defaultActiveKey={["active"]}>
		    <Panel header="节点间路径模糊查询" key="5">
		    	<Row>
		    		<Col span={4} style={{textAlign: 'center', position: 'relative', top: 17, color: '#ea0d0d'}}>{directionCom}</Col>
		    		<Col span={16}>
		    			<Row style={{marginTop: 7}}>
				    		<Input ref="start" placeholder="start"/>
				    	</Row>
				      <Row style={{marginTop: 7}}>
				    		<Input ref="destination" placeholder="destination"/>
				    	</Row>
		    		</Col>
		    		<Col span={4} style={{textAlign: 'center'}}><Icon style={{fontSize: 20, position: 'relative', top: 28}} type="retweet" onClick={this.changeDirection.bind(null, 'path')}/></Col>
		    	</Row>
		    	<Row style={{marginTop: 7}}>
		    		<Col offset={4} span={16}>
		    			<InputNumber style={{width: '100%'}} value={this.state.minLength} placeholder="minLength" onChange={this.handleChange.bind(null, 'minLength')}/>
		    		</Col>
		    	</Row>
		    	<Row style={{marginTop: 7}}>
		    		<Col offset={4} span={16}>
		    			<InputNumber style={{width: '100%'}} value={this.state.maxLength} placeholder="maxLength" onChange={this.handleChange.bind(null, 'maxLength')}/>
		    		</Col>
		    	</Row>
		    	<Row style={{marginTop: 7, textAlign: 'center'}}>
		      	<Button type="primary" onClick={this.getPaths}>查询</Button>
		      </Row>
		    </Panel>
		    <Panel header="节点间路径高级查询" key="6">
		    	<Row>
		    		<Col span={4} style={{textAlign: 'center', position: 'relative', top: 17, color: '#ea0d0d'}}>{directionCom}</Col>
		    		<Col span={16}>
		    			<Row style={{marginTop: 7}}>
				    		<Input ref="start" placeholder="start"/>
				    	</Row>
				      <Row style={{marginTop: 7}}>
				    		<Input ref="destination" placeholder="destination"/>
				    	</Row>
		    		</Col>
		    		<Col span={4} style={{textAlign: 'center'}}><Icon style={{fontSize: 20, position: 'relative', top: 28}} type="retweet" onClick={this.changeDirection.bind(null, 'path')}/></Col>
		    	</Row>
		    	<Row style={{marginTop: 7}}>
		    		<Col offset={4} span={16}>
		    			<InputNumber style={{width: '100%'}} min={0} max={1} value={this.state.minLength} placeholder="minLength" onChange={this.handleChange.bind(null, 'minLength')}/>
		    		</Col>
		    	</Row>
		    	<Row style={{marginTop: 7}}>
		    		<Col offset={4} span={16}>
		    			<InputNumber style={{width: '100%'}} min={1} max={5} value={this.state.maxLength} placeholder="maxLength" onChange={this.handleChange.bind(null, 'maxLength')}/>
		    		</Col>
		    	</Row>
		    	<Row style={{marginTop: 7, textAlign: 'center'}}>
		      	<Button type="primary" onClick={this.advancedQueryPath}>查询</Button>
		      </Row>
		    </Panel>
		  </Collapse>
		)
	}
}

function mapState2Props(state) {
	let { graphData: { nodesCount, relationshipsCount } } = state;
	return { nodesCount, relationshipsCount };
}

TopologySearch = connect(mapState2Props)(TopologySearch);

export default TopologySearch;